<template>
  <div class="me">
    <div class="icon">
        <van-icon name="chat-o" :size="20"/>
        <van-icon name="setting-o" :size="20"/>
    </div>
    <div class="avator">
        <van-image
            width="100"
            height="100"
            radius="8"
            :src="avatorImg"
        />
        <p>晚上不许做决定</p>
        <span>2262518584@qq.com</span>
    </div>
    <div class="btn">
        <span><van-icon name="flower-o" />我的笔记 ></span>
        <span><van-icon name="description" />我的订单 ></span>
    </div>
    <div class="ul-1">
        <ul>
            <li><span>我的行程</span><van-icon name="arrow" /></li>
            <li><span>我的点评</span><van-icon name="arrow" /></li>
        </ul>
    </div>
    <div class="ul-2">
        <ul>
            <li><span>常见问题</span><van-icon name="arrow" /></li>
            <li><span>意见反馈</span><van-icon name="arrow" /></li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            avatorImg:require("../assets/img/1664345067715.jpg")
        }
    }
}
</script>

<style lang="scss" scoped>
.me{
    .icon{
        float: right;
        margin: 0 10px;
        margin-top: 40px;
        .van-icon {
            padding: 0 3px;
        }
    }
    background-image:linear-gradient(
      #f07676 0%,
      #f7e1e4 6%,
      #f4f4f4 100%
    );
    overflow: hidden;
    height: 100vh;
    .avator{
        clear: both;
        text-align: center;
        padding: 20px 0;
        p{
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }
        span{
            font-size: 14px;
            padding: 4px 0;
            color: grey;
        }
    }
    .btn{
        display: flex;
        justify-content: space-around;
        span{
             .van-icon{
                margin-right: 2px;
             }
            display: block;
            background-color: #f07676;
            color: white;
            padding: 8px 10px;
            border-radius: 8px;
        }
    }
    .ul-1,.ul-2{
        ul{
            display: flex;
            border-radius: 5px;
            background-color: #f07676;
            flex-direction: column;
            margin: 20px 32px;
            li{
                padding: 15px 10px;
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom:1px solid rgb(196, 196, 196) 
            }
        }
    }
}
</style>